<template>
  <!-- 选择当前园区的楼栋 -->
  <div class="profile-box" style="width: 100%; height: 100%">
    <el-card class="BuildingSelect-Box" style="margin: 1vh 1vh; height: auto">
      <el-form :model="Form1" ref="Form1">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item prop="buildingItem" :label="`${$data.parkName}`">
              <el-select
                v-model="Form1.buildingItem"
                placeholder="请选择房源"
                @change="handleChange"
              >
                <el-option
                  v-for="item in options"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                  :id="item.id"
                ></el-option>
              </el-select>
            </el-form-item> </el-col
          ></el-row>
      </el-form>
    </el-card>

    <!-- 按条件查询当前园区当前楼栋楼层 -->
    <el-card class="FloorQuery-Box" style="margin: 1vh 1vh; height: 13vh; height: auto">
      <el-form :label-position="right" :model="FloorForm" :rules="rules" ref="FloorForm">
        <el-row>
          <!-- 输入最小筛选面积和最大筛选面积查询楼层 -->
          <el-col :span="8">
            <el-form-item label="筛选面积(m²)">
              <!-- 最小筛选面积 -->
              <el-form-item prop="areaMin">
                <el-input v-model="FloorForm.areaMin" style="width: 75%"></el-input>
              </el-form-item>
              <span style="margin-left: -10%; margin-right: 1%">—</span>
              <!-- 最大筛选面积 -->
              <el-form-item prop="areaMax">
                <el-input v-model="FloorForm.areaMax" style="width: 75%"></el-input>
              </el-form-item>
            </el-form-item>
          </el-col>

          <!-- 输入合同期限查询楼层 -->
          <el-col :span="8">
            <el-form-item label="合同期限">
              <!-- 合同开始日期 -->
              <el-form-item>
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="FloorForm.contractBeginTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 75%"
                ></el-date-picker>
              </el-form-item>
              <span style="margin-left: -10%; margin-right: 1%">—</span>
              <!-- 合同截止日期 -->
              <el-form-item>
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="FloorForm.contractEndTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 75%"
                ></el-date-picker>
              </el-form-item>
            </el-form-item>
          </el-col>

          <!-- 重置按钮和查询按钮 -->
          <el-col :span="4">
            <el-form-item>
              <el-button @click="resetForm('FloorForm')">重置</el-button>
              <el-button type="primary" @click="onSubmit('FloorForm')">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 房间不同状态对应不同颜色的标注 -->
      <el-row>
        <el-col :span="0.5">
          <div style="display: flex; align-items: center; font-size: 5px">
            <span style="margin-right: 4%">全部</span
            ><el-card
            shadow="hover"
            style="background-color: #ffffff; width: 35%; height: 2.8vh"
          ></el-card>
          </div>
        </el-col>
        <el-col :span="0.5">
          <div style="display: flex; align-items: center; font-size: 6px">
            <span style="margin-right: 4%">空置</span
            ><el-card
            shadow="hover"
            style="background-color: #ffffff; width: 35%; height: 2.8vh"
          ></el-card>
          </div>
        </el-col>

        <el-col :span="0.5">
          <div style="display: flex; align-items: center; font-size: 6px">
            <span style="margin-right: 4%">已预定</span
            ><el-card
            shadow="hover"
            style="background-color: #67c23a; width: 30%; height: 2.8vh"
          ></el-card>
          </div>
        </el-col>

        <el-col :span="0.5">
          <div style="display: flex; align-items: center; font-size: 6px">
            <span style="margin-right: 4%">不租</span
            ><el-card
            shadow="hover"
            style="background-color: #909399; width: 35%; height: 2.8vh"
          ></el-card>
          </div>
        </el-col>
        <el-col :span="0.5">
          <div style="display: flex; align-items: center; font-size: 6px">
            <span style="margin-right: 4%">已租赁</span
            ><el-card
            shadow="hover"
            style="background-color: #409eff; width: 35%; height: 2.8vh"
          ></el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 当前园区当前楼栋楼层查询结果 -->
    <el-card class="Building-Box" style="margin: 1vh 1vh; height: auto">
      <el-collapse v-model="activeNames" @change="handleChangeA">
        <el-collapse-item
          v-for="floor in floors"
          :key="floor.name"
          :title="floor.title"
          :name="floor.name"
          :index="floor.index"
        >
          <el-row :gutter="5">
            <el-col v-for="(card, index) in floor.cards" :key="index" :span="4">
              <el-tooltip
                effect="dark"
                content="预定&nbsp;租赁"
                placement="top"
                v-if="card.color === '#ffffff' && index !== 0"
              >
                <template #content>
                  <el-button
                    @click="openOrder()"
                    style="border: none; background: #303133; color: #fff"
                  >预定</el-button
                  >
                  <el-button
                    @click="jumptoAddContract()"
                    style="border: none; background: #303133; color: #fff"
                  >租赁</el-button
                  >
                </template>
                <el-card
                  :shadow="'hover'"
                  :style="{ height: '100%', backgroundColor: card.color }"
                  class="cards"
                >
                  {{ card.label }}
                </el-card>
              </el-tooltip>

              <el-tooltip
                effect="dark"
                content="取消预订 租赁"
                placement="top"
                v-else-if="card.color === '#67c23a' && index !== 0"
              >
                <template #content>
                  <el-button
                    @click="cancleOrder()"
                    style="border: none; background: #303133; color: #fff"
                  >取消预订</el-button
                  >
                  <el-button
                    @click="jumptoAddContract()"
                    style="border: none; background: #303133; color: #fff"
                  >租赁</el-button
                  >
                </template>
                <el-card
                  :shadow="'hover'"
                  :style="{ height: '100%', backgroundColor: card.color }"
                  class="cards"
                >
                  {{ card.label }}
                </el-card>
              </el-tooltip>

              <el-tooltip
                effect="dark"
                content="查看详情"
                placement="top"
                v-else-if="card.color === '#409eff' && index !== 0"
              >
                <template #content>
                  <el-button
                    @click="openDetail()"
                    style="border: none; background: #303133; color: #fff"
                  >查看详情</el-button
                  >
                </template>
                <el-card
                  :shadow="'hover'"
                  :style="{ height: '100%', backgroundColor: card.color }"
                  class="cards"
                >
                  {{ card.label }}
                  <div>
                    <el-button @click.stop @click="jumptoBill">查看账单</el-button>
                  </div>
                </el-card>
              </el-tooltip>

              <el-card
                v-else
                :shadow="'hover'"
                :style="{ height: '100%', backgroundColor: card.color }"
                class="cards"
              >
                {{ card.label }}
              </el-card>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <el-dialog title="查看详情" v-model="detailVisible" width="40%">
      <div class="title">基本信息</div>
      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">合同编号:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">客户名称:</div>
        </el-col>
        <el-col :span="10">
          <div class="item">手机号:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">开户银行:</div>
        </el-col>
        <el-col :span="10">
          <div class="item">开户人:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">卡号:</div>
        </el-col>
        <el-col :span="10">
          <div class="item">操作员:</div>
        </el-col>
      </el-row>

      <div class="title">租赁信息</div>
      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">租赁房间号:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">实际出租面积:</div>
        </el-col>
        <el-col :span="10">
          <div class="item">应收金额:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">开始时间:</div>
        </el-col>
        <el-col :span="10">
          <div class="item">结束时间:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">状态:</div>
        </el-col>
      </el-row>

      <div class="title">款项清单</div>
      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">租金费用:</div>
          <el-col :span="10">
            <div class="item">物业费用:</div>
          </el-col>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">公共能耗费用:</div>
        </el-col>
        <el-col :span="10">
          <div class="item">递增幅度（%）:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">租金免租天数（天）:</div>
        </el-col>
        <el-col :span="10">
          <div class="item">提前付款时间（天）:</div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left: 2%; margin-bottom: 2%">
        <el-col :span="10">
          <div class="item">保证金:</div>
        </el-col>
      </el-row>

      <div class="title">备注</div>

      <div class="title">附件</div>

      <span style="margin-left: 80%" slot="footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="预定" v-model="orderVisible" width="30%" center>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="orderForm"
        ref="orderForm"
      >
        <el-form-item label="客户名称">
          <el-input v-model="orderForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="orderForm.time"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="orderForm.phoneNumber"></el-input>
        </el-form-item>
        <span slot="footer">
          <el-button @click="orderVisible = false">取 消</el-button>
          <el-button type="primary" @click="subscribeOrder">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  housingResourcesList,
  queryBuilding,
  queryBuildingItem,
  subscribe,
} from "../../../api/system/profile";

export default {
  data() {
    return {
      queryparkId: "",
      querybuildingId: "",
      querybuildingName: "",
      floorCount: "",
      parkId: window.localStorage.getItem("chooseParkId"),
      buildingId: "",
      FloorForm: {
        parkId: window.localStorage.getItem("chooseParkId"),
        areaMin: "",
        areaMax: "",
        contractBeginTime: "",
        contractEndTime: "",
      },
      querybuildingId: "",
      selectedBuildingKey: "",
      dialogVisible: false,
      detailVisible: false,
      orderVisible: false,
      labelPosition: "right",
      orderForm: {},
      selectedCard: null,
      rules: {
        areaMin: [{ required: false, message: "最小值", trigger: "blur" }],
        areaMax: [{ required: false, message: "最大值", trigger: "blur" }],
        contractBeginTime: [
          { type: "date", required: false, message: "请选择日期", trigger: "change" },
        ],
        contractEndTime: [
          { type: "date", required: false, message: "请选择日期", trigger: "change" },
        ],
      },
      activeNames: [""],
      floorName: "",
      query: {},
      parkName: window.localStorage.getItem("chooseParkName"),
      options: [{ value: "", label: "" }],
      Form1: {
        buildingItem: "",
      },
      activeNames: ["1"],
      floors: [],
      selectedBuilding: "1",
      dataArray: "",
    };
  },
  created() {
    this.initdata();
    this.queryparkId = this.$route.query.parkId;
    this.querybuildingId = this.$route.query.buildingId;
    const queryBuildingName = this.$route.query.buildingName;

    housingResourcesList(this.queryparkId, this.querybuildingId)
      .then((res) => {
        console.log(JSON.stringify(res.data));
        console.log(this.options[0].key);
        this.floorCount = res.data.length;
        // 数组长度,即楼层数
        const numFloors = this.floorCount; // 可以替换成任意数字
        this.dataArray = res.data.flatMap((item) => {
          const floorInfo = item.floorInfo;
          const housingResources = item.housingResources.map((resource) => {
            const beginTime = resource.beginTime ? resource.beginTime : null;
            const endTime = resource.endTime ? resource.endTime : null;
            return {
              ...resource,
              beginTime: beginTime,
              endTime: endTime,
            };
          });
          return {
            floorInfo: floorInfo,
            housingResources: housingResources,
          };
        });
        this.floors = []; // 清空 floors 数组
        for (let i = 0; i < numFloors; i++) {
          const roomCount = this.dataArray[i].housingResources.length;
          this.floorCount = this.dataArray[i].floorInfo.floorName;
          const floor = {
            title: this.dataArray[i].floorInfo.floorNum + "F",
            name: "",
            cards: [
              {
                label: `在租面积：${
                  this.dataArray[i].floorInfo.rentArea || ""
                }m²\n租赁面积：${
                  this.dataArray[i].floorInfo.leasedArea || ""
                }m²\n房源数量：${
                  this.dataArray[i].floorInfo.numberOfListings !== undefined
                    ? this.dataArray[i].floorInfo.numberOfListings
                    : 0
                }间`,
                color: "#ffffff",
              },
              ...(this.dataArray[i].housingResources || []).map((room) => ({
                label: `房间号：${room.roomNum || ""}\n房间面积：${
                  room.area || ""
                }(m²)\n租金费用:${room.rentFee || ""}${room.rentUnit || ""}\n${
                  room.beginTime || ""
                }\n${room.endTime || ""}\n客户：${room.remarks || ""}`,
                color:
                  room.type === "新建"
                    ? "#909399"
                    : room.type === "空置"
                      ? "#ffffff"
                      : room.type === "预定"
                        ? "#67c23a"
                        : "#409eff",
              })),
            ],
          };
          const selectedOption = this.options.find(
            (option) => option.value === queryBuildingName
          );
          if (selectedOption) {
            this.selectedBuildingKey = selectedOption.key || "";
            this.Form1.buildingItem = queryBuildingName;
          }
          console.log(this.selectedBuilding);
          this.floors.push(floor);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  },

  methods: {
    handleDetails(card) {
      this.selectedCard = card;
      this.dialogVisible = true;
    },
    handleDialogClose(done) {
      // Reset the selected card when closing the dialog
      this.selectedCard = null;
      done();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.FloorForm.contractBeginTime = null;
      this.FloorForm.contractEndTime = null;
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.FloorForm);
          queryBuilding(this.FloorForm).then((res) => {
            console.log(JSON.stringify(res.data));
            this.floors = [];
            // Process the response data and update the floors array
            const numFloors = res.data.length;
            this.dataArray = res.data.flatMap((item) => {
              const floorInfo = item.floorInfo;
              const housingResources = item.housingResources.map((resource) => {
                const beginTime = resource.beginTime
                  ? resource.beginTime.substring(0, 10)
                  : null;
                const endTime = resource.endTime
                  ? resource.endTime.substring(0, 10)
                  : null;

                return {
                  ...resource,
                  beginTime: beginTime,
                  endTime: endTime,
                };
              });
              return {
                floorInfo: floorInfo,
                housingResources: housingResources,
              };
            });
            for (let i = 0; i < numFloors; i++) {
              const roomCount = this.dataArray[i].housingResources.length;
              this.floorCount = this.dataArray[i].floorInfo.floorName;
              const floor = {
                title: this.dataArray[i].floorInfo.floorNum + "F",
                name: "",
                cards: [
                  {
                    label: `在租面积：${
                      this.dataArray[i].floorInfo.rentArea || ""
                    }m²\n租赁面积：${
                      this.dataArray[i].floorInfo.leasedArea || ""
                    }m²\n房源数量：${
                      this.dataArray[i].floorInfo.numberOfListings !== undefined
                        ? this.dataArray[i].floorInfo.numberOfListings
                        : 0
                    }间`,
                    color: "#ffffff",
                  },
                  ...(this.dataArray[i].housingResources || []).map((room) => ({
                    label: `房间号：${room.roomNum || ""}\n房间面积：${
                      room.area || ""
                    }m²\n租金费用:${room.rentFee || ""}${room.rentUnit || ""}\n${
                      room.beginTime || ""
                    }\n${room.endTime || ""}\n客户：${room.remarks || ""}`,
                    color:
                      room.type === "新建"
                        ? "#909399"
                        : room.type === "空置"
                          ? "#ffffff"
                          : room.type === "预定"
                            ? "#67c23a"
                            : "#409eff",
                  })),
                ],
              };
              this.floors.push(floor);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    initdata() {
      housingResourcesList()
        .then((res) => {
          console.log(JSON.stringify(res.data));
          console.log(this.options[0].key);
          this.floorCount = res.data.length;
          this.dataArray = res.data.flatMap((item) => {
            const floorInfo = item.floorInfo;
            const housingResources = item.housingResources.map((resource) => {
              const beginTime = resource.beginTime
                ? resource.beginTime.substring(0, 10)
                : null;
              const endTime = resource.endTime ? resource.endTime.substring(0, 10) : null;
              return {
                ...resource,
                beginTime: beginTime,
                endTime: endTime,
              };
            });
            return {
              floorInfo: floorInfo,
              housingResources: housingResources,
            };
          });
          // 数组长度,即楼层数

          const numFloors = this.floorCount; // 可以替换成任意数字
          for (let i = 0; i < numFloors; i++) {
            const roomCount = this.dataArray[i].housingResources.length; //
            this.floorCount = this.dataArray[i].floorInfo.floorName;
            const floor = {
              title: this.dataArray[i].floorInfo.floorNum + "F",
              name: "",
              cards: [
                {
                  label: `在租面积：${
                    this.dataArray[i].floorInfo.rentArea || ""
                  }m²\n租赁面积：${
                    this.dataArray[i].floorInfo.leasedArea || ""
                  }m²\n房源数量：${
                    this.dataArray[i].floorInfo.numberOfListings !== undefined
                      ? this.dataArray[i].floorInfo.numberOfListings
                      : 0
                  }间`,
                  color: "#ffffff",
                },
                ...this.dataArray[i].housingResources.map((room) => ({
                  label: `房间号：${room.roomNum}\n房间面积：${room.area}m²\n租金费用:${room.rentFee}${room.rentUnit}\n${room.beginTime}\n${room.endTime}\n客户：${room.remarks}`,
                  color:
                    room.type === "新建"
                      ? "#909399"
                      : room.type === "空置"
                        ? "#ffffff"
                        : room.type === "预定"
                          ? "#67c23a"
                          : "#409eff",
                })),
              ],
            };
            this.floors.push(floor);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      queryBuildingItem(this.parkId, this.selectedBuildingKey)
        .then((res) => {
          console.log(JSON.stringify(res.data.buildingName));
          this.options = res.data.map((buildingName) => ({
            value: buildingName.buildingName,
            label: buildingName.buildingName,
            key: buildingName.id, // 加上一个 key 属性
          }));
          console.log(this.options[0].key);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleChangeA(newActiveNames) {
      this.activeNames = newActiveNames; // 更新 activeNames 数组
    },
    handleChange(val) {
      console.log(val);
      const selectedBuilding = this.Form1.buildingItem; // 获取选中的值
      this.selectedBuilding = this.Form1.buildingItem;
      const targetOption = this.options.find(
        (option) => option.value === selectedBuilding
      ); // 找到对应的对象
      console.log(targetOption);
      if (targetOption) {
        // 判断是否找到了对象
        const key = targetOption.key; // 获取key值
        this.buildingId = key;
        console.log(this.buildingId);
        this.selectedBuildingKey = this.buildingId; // 打印key值
        housingResourcesList(this.parkId, this.buildingId)
          .then((res) => {
            console.log(res.data);
            console.log(this.options[0].key);

            this.floorCount = res.data.length;
            // 数组长度,即楼层数

            this.dataArray = res.data.flatMap((item) => {
              const floorInfo = item.floorInfo;
              const housingResources = item.housingResources.map((resource) => {
                const beginTime = resource.beginTime
                  ? resource.beginTime.substring(0, 10)
                  : null;
                const endTime = resource.endTime
                  ? resource.endTime.substring(0, 10)
                  : null;

                return {
                  ...resource,
                  beginTime: beginTime,
                  endTime: endTime,
                };
              });
              return {
                floorInfo: floorInfo,
                housingResources: housingResources,
              };
            });

            console.log(this.dataArray);

            const numFloors = this.floorCount; // 可以替换成任意数字
            this.floors = []; // 清空 floors 数组

            for (let i = 0; i < numFloors; i++) {
              const roomCount = this.dataArray[i].housingResources.length;
              this.floorCount = this.dataArray[i].floorInfo.floorName;

              const floor = {
                title: this.dataArray[i].floorInfo.floorNum + "F",
                name: "",
                cards: [
                  {
                    label: `在租面积：${
                      this.dataArray[i].floorInfo.rentArea || ""
                    }m²\n租赁面积：${
                      this.dataArray[i].floorInfo.leasedArea || ""
                    }m²\n房源数量：${
                      this.dataArray[i].floorInfo.numberOfListings !== undefined
                        ? this.dataArray[i].floorInfo.numberOfListings
                        : 0
                    }间`,
                    color: "#ffffff",
                  },
                  ...(this.dataArray[i].housingResources || []).map((room) => ({
                    label: `房间号：${room.roomNum || ""}\n房间面积：${
                      room.area || ""
                    }m²\n租金费用:${room.rentFee || ""}${room.rentUnit || ""}\n${
                      room.beginTime || ""
                    }\n${room.endTime || ""}\n客户：${room.remarks || ""}`,
                    color:
                      room.type === "新建"
                        ? "#909399"
                        : room.type === "空置"
                          ? "#ffffff"
                          : room.type === "预定"
                            ? "#67c23a"
                            : "#409eff",
                  })),
                ],
              };
              this.floors.push(floor);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
      this.$forceUpdate();
    },
    openDetail() {
      this.detailVisible = true;
    },

    jumptoBill() {
      this.$router.push({
        path: "/financial/billManage",
        // , query: { ...this.$route.query, customerId: customerId }
      });
    },
    openOrder() {
      this.orderVisible = true;
    },
    jumptoAddContract() {
      // housingResourcesList(this.queryparkId,this.querybuildingId)
      //   .then((res) => {
      //     console.log(JSON.stringify("数据："+res.data));
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });

      this.$router.push({ path: "/contract/contractManage-contractAdd/index" });
    },
    cancleOrder() {
      this.$confirm("此操作将取消租赁, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已放弃取消",
          });
        });
    },
    subscribeOrder() {
      this.orderVisible = false;
      subscribe(this.id, 0)
        .then((res) => {
          console.log(res.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style>
.cards {
  white-space: pre-line;
  font-size: 15px;
}

.title {
  font-size: large;
  font-weight: bold;
  margin-bottom: 2%;
}

.item {
  font-size: medium;
  font-weight: 500;
}
</style>
